<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<meta name="viewport" content="initial-scale=1, user-scalable=0, minimal-ui" charset="UTF-8">
		<title></title>
		<link rel="stylesheet" href="css/index.css" />
		<link rel="stylesheet" href="css/swiper.css" />
		<link rel="stylesheet" href="css/mint.css">
	</head>
	<script src="js/serverUrl.js"></script>
	<script src="js/vue.js"></script>
	<script src="js/mint.js"></script>
	<script src="js/moment.js"></script>
	<style type="text/css">
		.info-list-item {
			display: flex;
			background-color: #fff;
		}
		
		.item-label{
			font-size: 15px;
			color: gray;
			text-align: center;
			padding-top: 3px;
			padding-bottom: 3px;
		}
		
		.newsTableDiv {
			margin-bottom: 4px;
			padding: 0px 4px;
		}
		.card {
			margin: 0px 0px;
		}
		.info-list-item +.info-list-item{
			margin-top: 2px;
		}
		.itemTop{
			display: flex;
			justify-content: space-between;
		}
        .container {
          display: flex;
        }
         
        .left {
          width: 30%;
          margin-left: 10px;
          align-items: center;
          margin-top: 10px;
        }
         
        .right {
          margin-left: 10px;
        }
        
        .card {
            margin:10px;
            border-top-left-radius: 8px;
            border-top-right-radius: 8px;
            border:1px solid rgb(230,205,169,1);
            width: inherit; /* 卡片宽度 */
        }
         
        .card-content {
          padding: 10px; /* 内容间距 */
        }
        
        
        /* 为具有特定类的label添加背景渐变 */
        .bg-gradient {
          background-image: linear-gradient(to right, rgb(242,234,202,0.5) 0%, rgb(238,157,64,1) 100%);
          background-size: 100% 100%;
          border-top-left-radius: 7px;
          border-top-right-radius: 7px;
          width: 100%;
          height: 30px;
          display: flex;
          align-items: center;
        }
        
	</style>
	<body  style="background-color: white;">
		<div id="app">
			<div id="trainDesctiption">
                <div style="padding: 10px;">
                    <div class="trainingTitle">{{ examTrain.realClassName }}</div>
                    <div class="trainingInfoExam">{{ examTrain.classRemark }}</div>
                </div>
                <div class="card">
                    <div class="bg-gradient">
                        <div style="margin-left: 10px;color: rgb(113,96,59,1)">课程信息</div>
                    </div>
                    <div class="card-content">
                        <div class="trainingInfoExam"> 开始时间：{{ examTrain.startDate | formatTime}}</div>
                        <div class="trainingInfoExam"> 结束时间：{{ examTrain.endDate | formatTime}}</div>
                        <div class="trainingInfoExam"> 已学时长：{{ learnTime | secondsToMinutes }}分钟</div>
                        <div class="trainingInfoExam"> 达标时长：{{ standardHour }}分钟</div>
                        <div class="trainingInfoExam"> 考试情况：{{ examInfo.correctScore }}分/{{ examInfo.totalScore }}分</div>
                    </div>
                </div>
                
			</div>
		</div>
	</body>
	<script type="text/javascript">
		var app = new Vue({	
			el: '#app',
			data:{
                standardHour: 0,
                learnTime: 0,
                examInfo: {
                    
                },
                examTrain: {
                    
                },
                examArr: []
			},
			filters:{
				formatTime(val){
					if (val == null) {
						return ""
					}
					return moment(val).format("YYYY-MM-DD HH:mm:ss")
				},
                secondsToMinutes(val) {
                    if (val == null) {
                        return ""
                    }
                  return Math.floor(val / 60); // 返回格式化字符串
                }
			},
			created() {
				window.getExamTrain = this.getExamTrain
                window.clear = this.clear
			},
			methods:{
              getExamTrain (examInfo,examTrain,examArr){
                  this.examInfo = examInfo
                  this.examTrain = examTrain
                  this.examArr = examArr
                  for(var i = 0;i<examArr.length;i++){
                      var exam = examArr[i]
                      this.standardHour = this.standardHour + exam.standardHour
                      this.learnTime = this.learnTime + exam.learnTime
                  }
              },
              clear () {
                  this.examArr = []
                  this.examInfo = {}
                  this.examTrain = {}
              },
              toOnlineExam (index){
                    //var exam = this.examList[index]
                    
              }
			}
		})	
	</script>
</html>
